.my-service-page {
  position: relative;

  .my-service {
    position: relative;
    z-index: 1;
    height: 450rpx;
    width: 100%;
    background: #212121;
    border-radius: 0 0 16rpx 16rpx;
  }

  .box {
    position: absolute;
    top: 27rpx; // 控制上移覆盖背景图
    width: 100%;
    z-index: 10;
    .share-box{
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 29rpx;
      .share{
        background: url("../../../assets/home/invite-coupon.png");
        background-size: 100% 100%;
        width: 587rpx;
        height: 161rpx;
      }
    }
    .coupon-box{
      display: flex;
      flex-direction: column;
      align-items: center;
      background: url("../../../assets/home/invite-coupon-bg.png");
      background-size: 100% 100%;
      height: 661rpx;
      margin: 0 33rpx 40rpx;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      .tips{
        position: absolute;
        top: 16rpx;
        left: 16rpx;
        font-weight: bold;
        font-size: 24rpx;
        color: #F7FAF8;
      }
      .num-box{
        background: url("../../../assets/home/invite-coupon-bg2.png");
        background-size: 100% 100%;
        width: 344rpx;
        height: 466rpx;
        position: relative;
        .nums{
          text-align: center;
          position: absolute;
          bottom: 73rpx;
          width: 100%;
          .num{
            font-weight: bold;
            color: #FE7407;
            font-size: 37rpx;
            span{
              font-size: 100rpx;
            }
          }
          .title{
            font-weight: bold;
            font-size: 43rpx;
            color: #212121;
          }
        }

      }
      .invite-but{
        width: 410rpx;
        height: 80rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #FE7407;
        border-radius: 50rpx;
        margin: 30rpx 0;
        image{
          width: 39rpx;
          height: 34rpx;
        }
        .title{
          margin-left: 10rpx;
          font-size: 24rpx;
          color: #F7FAF8;
        }
      }
      .time{
        font-size: 24rpx;
        color: #212121
      }
    }
    .user-box{
      display: flex;
      align-items: center;
      .user-item{
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-right: 38rpx;
        image{
          width: 90rpx;
          height: 90rpx;

        }
        .name{
          margin-top: 15rpx;
          font-size: 18rpx;
          color: #212121;
        }
      }
    }
    .title-item-box {
      margin: 0 33rpx 40rpx;
      background-color: #f7faf8;
      padding: 41rpx;
      border-radius: 16rpx;
      .title-item {
        font-size: 32rpx;
        font-weight: bold;
        margin-bottom: 20rpx;
        position: relative;

        &::before {
          content: '';
          display: inline-block;
          width: 10rpx;
          height: 32rpx;
          background-color: #fe7407;
          margin-right: 16rpx;
          vertical-align: middle;
          border-radius: 20rpx;
        }
      }




      .dsc{
        padding:  0  0 0 30rpx;
      }
    }
  }
}
